<template>
  <div>
    <el-form inline v-model="parameter" ref="form">
      <div class="row">
        <el-form-item label="客户电话" prop="tel">
          <el-input
            size="small"
            placeholder="请输入"
            v-model="parameter.tel"
          ></el-input>
        </el-form-item>
        <el-form-item label="进线时间" prop="tel">
          <el-date-picker
            size="small"
            class="bg-grey"
            v-model="parameter.releaseTime"
            value-format="yyyy-M-dd H:m:s"
            :default-time="['0:0:0', '23:59:59']"
            type="datetimerange"
            range-separator="-"
            start-placeholder="开始"
            end-placeholder="结束"
          >
          </el-date-picker>
        </el-form-item>
      </div>
      <div class="row mb10">
        <el-button
          size="small"
          type="primary"
          @click="search()"
          :loading="loading"
        >
          <i class="fa fa-fw iconfont icon-search"></i>查询
        </el-button>
        <el-button
          size="small"
          type="warning"
          @click="reset()"
          :loading="loading"
        >
          <i class="fa fa-fw iconfont icon-reset"></i>重置
        </el-button>
        <el-button
          size="small"
          type="info"
          plain
          @click="refresh()"
          :loading="loading"
        >
          <i class="fa fa-fw iconfont icon-refresh"></i>刷新
        </el-button>
      </div>
    </el-form>
    <el-table
      ref="myTable"
      size="small"
      style="width: 100%"
      v-loading="loading"
      header-row-class-name="info-row"
      :row-class-name="tableRowClassName"
      highlight-current-row
      :data="tableList"
      :default-sort="{ prop: '是否绑定', order: 'descending' }"
    >
      <el-table-column label="客户电话">
        <template slot-scope="scope">
          {{ scope.row.客户电话 | tel8star() }}
        </template>
      </el-table-column>
      <el-table-column label="资源渠道">
        <template slot-scope="scope">
          <div class="text-overflow">
            {{ scope.row.资源渠道 }}{{ scope.row.id }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="进线时间">
        <template slot-scope="scope">
          {{ scope.row.进线时间 }}
        </template>
      </el-table-column>
      <el-table-column label="操作" prop="是否绑定">
        <!-- prettier-ignore -->
        <template slot-scope="scope">
          <template v-if="scope.row.是否绑定">
            <span class="text-green"><i class="el-icon-success"></i> 当前绑定</span>
          </template>
          <template v-else>
            <el-popconfirm
              icon="el-icon-warning"
              title="当前操作将修改并覆盖绑定关系！"
              confirm-button-text="修改并覆盖"
              confirm-button-type="danger"
              @confirm="BindingIt(scope.row)">
              <el-button slot="reference" type="text">绑定ta</el-button>
            </el-popconfirm>
          </template>
        </template>
      </el-table-column>
    </el-table>
    <div class="align-rm mt10">
      <el-pagination
        @size-change="handleSizeChange($event)"
        @current-change="handleCurrentChange($event)"
        :current-page="page.current"
        :page-sizes="page.sizes"
        :page-size="page.size"
        :layout="page.layout"
        :total="page.total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import queryTablePage from "@/mixin/queryTablePage.vue";
export default {
  name: "",
  mixins: [queryTablePage],
  data() {
    return {
      parameter: {
        tel: "",
        releaseTime: [],
      },
    };
  },
  methods: {
    format: function (item) {
      return {
        id: this._.get(item, "id"),
        客户电话: String(this._.get(item, "客户电话")),
        资源渠道: this._.get(item, "资源渠道"),
        是否绑定: this._.get(item, "isBinding"),
        进线时间: this._.get(item, "进线时间"),
      };
    },
    ajaxData: function (isToPage1) {
      if (isToPage1) {
        this.page.current = 1;
      }
      this.loading = true;
      this.$api.工作台资源绑定
        .get客户资源渠道()
        .then((res) => {
          if (res.code == 200) {
            this.page.total = res.total;
            this.clearTable();
            return Promise.resolve(res.data);
          }
          console.log(res);
        })
        .then((res) => {
          let rows = res.map((row) => {
            return this.format(row);
          });
          rows.forEach((row) => {
            this.addTableRow(row);
          });
        })
        .catch((err) => {})
        .finally(() => {
          this.loading = false;
        });
    },
    search() {
      this.ajaxData(true);
    },
    reset() {
      this.parameter = this.$options.data().parameter;
      this.ajaxData(true);
    },
    refresh() {
      this.ajaxData(false);
    },

    BindingItCallBack: function (row) {
      this.tableList.forEach((row) => {
        row.是否绑定 = false;
      });
      row.是否绑定 = true;
      this.tableList.sort((a, b) => {
        return b.是否绑定 - a.是否绑定;
      });
    },
    BindingIt: function (row) {
      this.loading = true;
      this.$api.工作台资源绑定
        .setBinding()
        .then((res) => {
          if (res.code == 200) {
            this.BindingItCallBack(row);
            this.$message.success("已绑定");
          } else {
            return Promise.reject(res);
          }
        })
        .catch((err) => {
          this.$message.error("绑定失败");
        })
        .finally((_) => {
          this.loading = false;
        });
    },
  },
  mounted() {
    this.ajaxData();
  },
};
</script>

<style>
</style>